
// 1. 使用请求接口的方式获取评论列表并渲染 
//json-server模拟接口:npm i json-server -D  数据放在根目录的db.json   启动服务：json-server db.json
//下载axios ：npm i axios
// 2. 使用自定义Hook函数封装数据请求的逻辑 
// 3. 把评论中的每一项抽象成一个独立的组件实现渲染

import { useState, useRef, useEffect } from "react";
import './App.scss'
import avatar from './images/bilibil.png'
//引入lodash
import _ from 'lodash'
//引入classNames
import classNames from "classnames";
//引入uuid
import { v4 as uuidV4 } from 'uuid'
//引入dayjs
import dayjs from "dayjs";
import axios from "axios";
//封装item组件
function Item({ comment ,onDel}) {
  return (
    <div  className="reply-item">
      {/* 头像 */}
      <div className="root-reply-avatar">
        <div className="bili-avatar">
          <img
            className="bili-avatar-img"
            src="{comment.user.avatar}"
            alt=""
          />
        </div>
      </div>

      <div className="content-wrap">
        {/* 用户名 */}
        <div className="user-info">
          <div className="user-name">{comment.user.uname}</div>
        </div>
        {/* 评论内容 */}
        <div className="root-reply">
          <span className="reply-content">{comment.content}</span>
          <div className="reply-info">
            {/* 评论时间 */}
            <span className="reply-time">{comment.ctime}</span>
            {/* 评论数量 */}
            <span className="reply-time">点赞数:{comment.like}</span>
            {/* 只有当前用户id===当前评论的id才能显示删除 */}
            {user.uid === comment.user.uid && <span className="delete-btn" onClick={()=>onDel(comment.rpid)} >
              删除
            </span>
            }

          </div>
        </div>
      </div>
    </div>
  )
}
//自定义hook函数
function useGetList() {
  // 评论列表
  const [commentList, setCommentList] = useState([])
  useEffect(() => {
    //请求数据
    async function getList() {
      //axios请求数据
      const res = await axios.get('http://localhost:3000/list')
      setCommentList(res.data)


    }
    getList()
  }, [])
  return { commentList, setCommentList }
}
// 当前登录用户信息
const user = {
  // 用户id
  uid: '30009257',
  // 用户头像
  avatar,
  // 用户昵称
  uname: '黑马前端',
}
// 导航 Tab 数组
const tabs = [
  { type: 'hot', text: '最热' },
  { type: 'time', text: '最新' },
]

function App() {
  const inputRef = useRef(null)
  //存储评论内容
  const [comment, setComment] = useState('')
  //请求数据
  const { commentList, setCommentList } = useGetList()
  //删除
  function handleDel(id) {
    setCommentList(commentList.filter(item => item.rpid !== id))
  }
  //记录type
  const [type, setType] = useState('hot')
  //tab切换
  function handleTabChange(type) {
    //记录当前点击的type值
    setType(type)
    //基于type对列表的排序。调用lodah库函数
    if (type === 'hot') {
      //_.orderBy()第一个参数是需要排序的原数据，第二个参数是根据哪个字段排序，第三个参数是升序还是倒序排
      setCommentList(_.orderBy(commentList, 'like', 'desc'))
    } else {
      //根据创建时间排序
      setCommentList(_.orderBy(commentList, 'ctime', 'desc'))
    }

  }
  //发布按钮回调
  function handlePublish() {
    setCommentList([

      {
        rpid: uuidV4(),//随机id
        user: {
          uid: '30009257',
          avatar,
          uname: '黑马前端',
        },
        content: comment,
        ctime: dayjs(new Date()).format('MM-DD HH:ss'),
        like: 66,
      },
      ...commentList,
    ])
    setComment('')
    inputRef.current.focus()
  }
  return (
    <>
      <div className="app">
        {/* 导航 Tab */}
        <div className="reply-navigation">
          <ul className="nav-bar">
            <li className="nav-title">
              <span className="nav-title-text">评论</span>
              {/* 评论数量 */}
              <span className="total-reply">{10}</span>
            </li>
            <li className="nav-sort">
              {/* 高亮类名： active */}
              {tabs.map(tab => (
                <span key={tab.type}
                  // className={`nav-item ${type === tab.type && 'active'}`}
                  className={classNames('nav-item', { active: type === tab.type })}
                  onClick={() => handleTabChange(tab.type)}>{tab.text}</span>
              ))}
            </li>
          </ul>
        </div>

        <div className="reply-wrap">
          {/* 发表评论 */}
          <div className="box-normal">
            {/* 当前用户头像 */}
            <div className="reply-box-avatar">
              <div className="bili-avatar">
                <img className="bili-avatar-img" src={avatar} alt="用户头像" />
              </div>
            </div>
            <div className="reply-box-wrap">
              {/* 评论框 */}
              <textarea
                className="reply-box-textarea"
                placeholder="发一条友善的评论"
                value={comment}
                onChange={(e) => setComment(e.target.value)}
                ref={inputRef}
              />
              {/* 发布按钮 */}
              <div className="reply-box-send">
                <div className="send-text" onClick={handlePublish}>发布</div>
              </div>
            </div>
          </div>
          {/* 评论列表 */}
          <div className="reply-list">
            {/* 评论项 */}
            {commentList.map(comment => (
             < Item key={comment.rpid} comment={comment} onDel={handleDel}/>
              ))}

          </div>
        </div>
      </div>
    </>
  );
}

export default App;
